<template>
    <div class="body">
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
    </div>
</template>
<style lang="scss" scoped>
$count: 300;
$duration: 50;
// .layer1  直径小 数量多 速度慢
// .layer2  直径中 数量中 速度中
// .layer3  直径大 数量少 速度快
@function createShadow($count) {
    $boxShadow: 0 0 0 0 #fff;
    // 通过循环在视口范围内创建$count个阴影并随机设置偏移量，最终将结果绑定至$boxShadow变量中
    @for $i from 0 through $count {
        $boxShadow: "#{$boxShadow}, #{random(100)}vw #{random(100)}vh 0 0 #fff"
    }
    // unquote函数将$boxShadow变量中的前后两个双引号删除，"0 0 0 0 #fff ......" -> 0 0 0 0 #fff ......
    @return unquote($boxShadow)
}
.body {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    position: absolute;
    @for $i from 1 through 3 {
        $currentCount: floor(calc($count / $i));
        $currentDuration: floor(calc($duration / $i));
        .layer#{$i} {   // .layer1 .layer2 .layer3
            $size: #{$i}px;
            width: $size;
            height: $size;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: createShadow(300);
            animation: moveUp #{$currentDuration}s linear infinite;
            &:after {
                content: "";
                position: fixed;
                left: 0;
                top: 100vh;
                width: inherit;
                height: inherit;
                border-radius: inherit;
                box-shadow: inherit;
            }
        }
    }
}
@keyframes moveUp {
    100% {
        transform: translateY(-100vh);
    }
}
</style>